<template>
  <!-- 因为要布局 所以要块级元素 -->
  <div>
    <svg-icon
      icon-class="fullscreen"
      style="color: #fff; width: 20px; height: 20px"
      @click="fullscreenFn"
    />
  </div>
</template>

<script>
// import ScreenFull from 'screenfull'
export default {
  data() {
    return {
      screenisOk: false
    }
  },
  // 方法
  methods: {
    fullscreenFn() {
      //   if (!ScreenFull.isEnabled) {
      //     // 此时全屏不可用
      //     this.$message.warning('此时全屏组件不可用')
      //     return
      //   }

      //   ScreenFull.toggle() // 全屏的方法
      // 原生方法 实现全屏切换
      if (!this.screenisOk) {
        document.documentElement.requestFullscreen()
        this.screenisOk = true
      } else {
        document.exitFullscreen()
        this.screenisOk = false
      }
    }
  }
}
</script>

<style>
</style>
